<template>
  <div id="home">
    <!--    加载子组件 , 使用插槽的方式 , 来想子组件插入数据 ()导航栏-->
    <nav-bar class="home-nav">
      <div slot="center">购物街</div>
    </nav-bar>

    <!--    展示流行  ,新款 , 精选-->
    <!--    <tab-control-->
    <!--      :titles="['流行', '新款', '精选']"-->
    <!--      @tabClick="tabclick"-->
    <!--      ref="tabControl1"-->
    <!--      v-show="isshowBackTop"-->
    <!--    ></tab-control>-->

    <!--    滚动条 ====================-->
    <scroll class="content"
            ref="scroll"
            :probe-type="3"
            @scroll="contentScroll"
            :pull-up-load="true"
            @pullingUp="loadMore"
    >
      <!--    轮播图-->
      <home-swiper :banners="banners"></home-swiper>
      <!--    推荐信息的展示-->
      <recommend-view :recommpends="recommends"/>
      <!--    本周流行模块 组件-->
      <feature-view/>

      <!--    展示流行 , 新款 , 精选 导航栏 , 指定一个内部点击事件 , 回调函数-->
      <tab-control class="tab-control"
                   :titles="['流行','新款','精选']"
                   @tabClick="tabclick"
      />

      <!--    显示 goods所有的数据 , -->
      <goods-list
        :goods="goods[courrentType].list"
      />
    </scroll>
    <!--    显示回到顶层的按钮 , 指定点击事件-->
    <back-top @click.native="backClick"
              v-show="isshowBackTop"/>

  </div>
</template>

<script>

// <!--导入子组件-->
import NavBar from "components/common/navbar/NavBar";
//导入 Home的子组件 轮播图
import HomeSwiper from "./childComps/HomeSwiper";
//导入 Home的子组件 推荐信息的展示
import RecommendView from "./childComps/RecommendView";
//导入今日选择的子组件
import FeatureView from "./childComps/FeatureView";
//导入goods数据显示的子组件
import GoodsList from "components/content/goods/GoodsList";


//导入子组件的导航栏
import TabControl from "components/content/tabControl/TabControl";

//引入滚动条
import Scroll from "components/common/scroll/Scroll";
//引入回到顶部的子组件
import BackTop from "components/content/backTop/BackTop";


// 导入 发送主页面的axios请求js文件
import {
  getHomeMultdata,
  getHomeGoods
} from "network/home";

export default {
  name: "Home",
  components: {
    NavBar,
    HomeSwiper,
    RecommendView,
    FeatureView,
    GoodsList,
    TabControl,
    Scroll,
    BackTop
  },
  data() {
    return {
      // banners: [],
      // recommends: [],
      //
      // goods: {
      //   //流行   当前的页数  总共请求的数据存放的地点
      //   'pop': {page: 0, list: []},
      //   //新款
      //   'new': {page: 0, list: []},
      //   // 精选
      //   'sell': {page: 0, list: []},
      // },

      //  当前显示的类型
      courrentType: 'pop',

      isshowBackTop: false,


    }
  },
  //组件钩子 , 组件创建 , 触发函数  ===============================
  created() {

    //  1 : 请求多个数据 , 轮播图数据
    this.getHomeMultdata()

    //2 : 请求商品数据
    this.loadMore()
  },
  //函数 =======================================================
  methods: {

    contentScroll(position) {
      this.isshowBackTop = -position.y > 660;

    },
    backClick() {
      //回到顶部
      this.$refs.scroll.scroll.scrollTo(0, 0, 2000);
    },
    /**
     * 事件监听相关的方法
     *
     */
    //子组件的回调函数 , 用户告诉父组件 , 显示什么类型的商品
    tabclick(index) {
      switch (index) {
        case 0:
          this.courrentType = 'pop';
          // this.$refs.scroll.scroll.scrollTo(0, 660);
          break
        case 1:
          this.courrentType = 'new';
          // this.$refs.scroll.scroll.scrollTo(0, 660);
          break
        case 2:
          this.courrentType = 'sell';
          // this.$refs.scroll.scroll.scrollTo(0, 660);
          break
      }

    },
    /**
     * 网络请求相关的方法
     */
    //  1 : 请求多个数据 , 轮播图数据
    getHomeMultdata() {
      getHomeMultdata().then(res => {
        //保存数据
        // this.banners = res.data.banner.list;
        // this.recommends = res.data.recommend.list;
        //  把数据  存放到Vuex里面
        this.$store.commit("addValue", res.data)
      })
    },
    //2 : 请求商品数据(以分页进行获取 , 当前要请求的数据的类型)
    getHomeGoods(type) {
      const page = this.goods[type].page + 1;
      //获取指定数据的页数
      getHomeGoods(type, page).then(res => {
        // 拿到了30条数据(把数据 , 追加到data的数组里面)
        // 把数据  存放到Vuex里面
        var information = {
          usertype: type,
          userdata: res.data.list
        }

        this.$store.commit("addData", information)

        // this.goods[type].list.push(...res.data.list);
        // //  修改当前访问的页数
        // this.goods[type].page += 1;
        this.$refs.scroll.scroll.finishPullUp()
        //指定修改 , 可不可以下次加载更多
        this.$refs.scroll.scroll.refresh()//bs提供的刷新的方法，详见官网
      }).catch(err => {
        console.log(err);
      })
    },

    //  上拉加载更多
    loadMore() {
      //  获取当前是哪一个 触发的下拉加载更多(流行 ...)
      this.getHomeGoods('pop');
      this.getHomeGoods('new');
      this.getHomeGoods('sell');
    },

  },
  //用于 展示的数据
  computed: {
    banners() {
      return this.$store.state.banners == null ? new Array() : this.$store.state.banners;
    },
    recommends() {
      return this.$store.state.recommends == null ? new Array() : this.$store.state.recommends;
    },
    goods() {
      return this.$store.state.goods == null ? new Array() : this.$store.state.goods;
    },
  }
}
</script>

<style scoped>
#home {
  padding-top: 44px;
  /*指定home指定一个视口高度*/
  height: 100vh;
  position: relative;
}


.home-nav {
  /*设置文字的颜色*/
  color: #fff;
  /*<!--设置背景颜色-->*/
  background-color: var(--color-tint);
  /*  定位 , 让导航栏 , 固定*/
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
}

.tab-control {
  position: sticky;
  top: 44px;
}

/*设置滚动条的高度*/
.content {
  overflow: hidden;
  /*定位*/
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}

/*设置滚动条的高度 (第二中方式)*/
/*.content {*/
/*  height: calc(100% - 100px);*/
/*  overflow: hidden;*/
/*  margin-top: 44px;*/
/*}*/

</style>
